<template>
	<div class="content-wrap">
		<div class="content-top-box">
			<!-- 搜索区域 -->
			<ul class="search-container">
				<li>
					<span class="search-item-name">手机号：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入手机号" v-model="phone" clearable maxlength="11" @clear="clearPhoneFn">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">姓名：</span>
					<el-input class="search-item-content search-item-text" placeholder="请输入姓名" v-model="userName" clearable @clear="clearUserName">
					</el-input>
				</li>
				<li>
					<span class="search-item-name">支付时间：</span>
					<el-date-picker v-model="payDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" @change="changePayDate">
					</el-date-picker>
				</li>
				<li>
					<span class="search-item-name">支付方式：</span>
					<el-select class="search-item-content" v-model="payState" placeholder="请选择" clearable @change="changePayType">
						<el-option v-for="item in payTypeOptions" :key="item.value" :label="item.message" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<span class="search-item-name">状态：</span>
					<el-select class="search-item-content" v-model="state" placeholder="请选择" clearable @change="changeOrderType">
						
						<el-option v-for="item in orderTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
					<download-excel class="export-excel-wrapper" :data="jsonData" :fields="jsonFields" name="牛采购订单表.xls" v-if="exportBtn">
						<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
						<el-button class="search-btn" type="primary" icon="el-icon-download">导出</el-button>
					</download-excel>

				</li>
			</ul>
		</div>

		<div class="content-bottom-box">
			<!-- 表格 -->
			<div class="content-form-box">
				<el-table v-loading="loadingFlag" :data="tableData" :height="tableHeight" ref="table" border stripe style="width: 100%">
					<el-table-column prop="serialNumber" label="序号" width="50" fixed>
					</el-table-column>
					<el-table-column prop="orderRefNo" label="订单编号" width="180" fixed>
					</el-table-column>
					<el-table-column prop="payTime" label="支付时间" width="200">
					</el-table-column>
					<el-table-column prop="userName" label="姓名" width="80">
					</el-table-column>
					<el-table-column prop="salesPrice" label="单价(元/kg)" width="120">
					</el-table-column>
					<el-table-column prop="productWeight" label="整牛重量(kg/头)" width="140">
					</el-table-column>
					<el-table-column prop="totalPrice" label="整牛单价(元/头)" width="140">
					</el-table-column>
					<el-table-column prop="deliveryMonth" label="剩余交货期" width="120">
					</el-table-column>
					<el-table-column prop="quantity" label="采购数量(头)" width="110">
					</el-table-column>
					<el-table-column prop="cattleIdCard" label="耳标号" width="124">
					</el-table-column>
					<!-- <el-table-column label="耳标">
						<template slot-scope="scope">
							<el-button @click="erbiao(scope.row)" type="text" size="small">【查看】</el-button>
						</template>
					</el-table-column> -->
					<el-table-column prop="orderMoney" label="采购金额(元)" width="120">
					</el-table-column>
					<el-table-column prop="expressFee" label="物流费用(元)" width="120">
					</el-table-column>
					<el-table-column prop="payMoney" label="支付金额(元)" width="160">
					</el-table-column>
					<el-table-column prop="payMethod" label="支付方式" width="120">
						<template slot-scope="scope">
							<span>
		                    	{{scope.row.payMethod == 'overpay' ? '余额支付': '' 
								 || scope.row.payMethod == 'wechat' ? '微信支付': ''}}
		                    </span>
						</template>
					</el-table-column>
					<el-table-column prop="phone" label="手机号" width="130">
					</el-table-column>
					<el-table-column prop="address" label="收件地址" width="200" :show-overflow-tooltip="true">
					</el-table-column>
					<el-table-column prop="state" label="状态" width="100">
						<template slot-scope="scope">
							<span>
			                    {{scope.row.state == 0 ? '待支付': '' 
								|| scope.row.state == 1 ? '养殖中': ''
								|| scope.row.state == 2 ? '待发货': ''
								|| scope.row.state == 3 ? '已完成': ''
								|| scope.row.state == 9 ? '待收货': ''
								|| scope.row.state == 99 ? '订单取消': ''
								}}
			                </span>
						</template>
					</el-table-column>
					<el-table-column prop="contractCode" label="合同编号" width="130">
					</el-table-column>
					<el-table-column label="操作" fixed="right">
						<template slot-scope="scope">
							<el-button @click="checkCattleInfoFn(scope.row)" type="text" size="small" v-if="detailBtn">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 页码 -->
			<div class="content-Page-container">
				<BaseFormPage :pagination="pagination" @cFirstPageFn="cFirstPageFn" @cLastPageFn="cLastPageFn" @cJumpPageFn="cJumpPageFn" @cPreFn="cPreFn" @cNextFn="cNextFn" @cRefreshFn="cRefreshFn">
				</BaseFormPage>
			</div>
		</div>
		
		<!-- 耳标弹框 -->
		<el-dialog title="牛耳标ID" :visible.sync="erbiaoFlag" :show-close="false" width="382px">
			<div class="erbiao-content">
				<p class="erbiao-subtitle">耳标信息</p>
				<p class="erbiao-info">
					{{erbiaos}}
				</p>
				<div class="dialog-btn">
					<el-button type="primary" size="medium" @click="erbiaoFlag = false">关闭</el-button>
				</div>
			</div>
		</el-dialog>

		<!-- 订单详情弹窗 -->
		<el-dialog title="订单详情" :visible.sync="dialogFlag" :show-close="false" width="804px">
			<div class="dialog-box">
				<div class="info-detail-box">
					<div class="info-detail-list">
						<ul>
							<li class="list-title">用户信息</li>
							<li>
								<span class="info-tag-name">姓名：</span>
								<span class="info-tag-text">{{detailData.userBaseVo.userName}}</span>
							</li>
							<li>
								<span class="info-tag-name">手机号：</span>
								<span class="info-tag-text">{{detailData.userBaseVo.phone}}</span>
							</li>
							<li>
								<span class="info-tag-name">性别：</span>
								<span class="info-tag-text">{{detailData.userBaseVo.gender}}</span>
							</li>
						</ul>
						<ul>
							<li class="list-title">订单记录</li>
							<li>
								<span class="info-tag-name">订单编号：</span>
								<span class="info-tag-text">{{detailData.orderRefNo}}</span>
							</li>
							<li>
								<span class="info-tag-name">采购数量(头)：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.buyQuantity}}</span>
							</li>
							<li class="resetCss">
								<span class="info-tag-name">耳标号：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.buyCattleIdCards}}</span>
							</li>
							<li>
								<span class="info-tag-name">转售中数量(头)：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.sellingNum}}</span>
							</li>
							<li class="resetCss" style="display: inherit;padding-left: 46px;">
								<span class="info-tag-name">转售中耳标号：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.sellingCattleIdCards}}</span>
							</li>
							<li>
								<span class="info-tag-name">已转售数量(头)：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.sellOutNum}}</span>
							</li>
							<li class="resetCss" style="display: inherit; padding-left: 36px;">
								<span class="info-tag-name">已转售耳标号：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.sellOutCattleIdCards}}</span>
							</li>
							<li>
								<span class="info-tag-name">供货中数量(头)：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.supplyNum}}</span>
							</li>
							<li>
								<span class="info-tag-name">供货中耳标号：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.supplyCattleIdCards}}</span>
							</li>
							<li>
								<span class="info-tag-name">已供货数量(头)：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.suppliedNum}}</span>
							</li>
							<li class="resetCss">
								<span class="info-tag-name">已供货耳标号：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.suppliedCattleIdCards}}</span>
							</li>
							<li>
								<span class="info-tag-name">剩余数量(头)：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.savesNum}}</span>
							</li>
							<li class="resetCss">
								<span class="info-tag-name">剩余数量耳标号：</span>
								<span class="info-tag-text">{{detailData.orderBaseVo.savesCattleIdCards}}</span>
							</li>
						</ul>
					</div>

					<ul class="info-detail-list">
						<li class="list-title">订单信息</li>
						<li>
							<span class="info-tag-name">订单编号：</span>
							<span class="info-tag-text">{{detailData.orderBaseVo.orderRefNo}}</span>
						</li>
						<li>
							<span class="info-tag-name">支付时间：</span>
							<span class="info-tag-text">{{detailData.payTime}}</span>
						</li>
						<li>
							<span class="info-tag-name">养殖周期：</span>
							<span class="info-tag-text">{{detailData.timeLimit}}{{detailData.timeType}}</span>
						</li>
						<li>
							<span class="info-tag-name">剩余交货期：</span>
							<span class="info-tag-text">{{detailData.deliveryMonth}}个月</span>
						</li>
						<li>
							<span class="info-tag-name">采购数量(头)：</span>
							<span class="info-tag-text">{{detailData.orderBaseVo.buyQuantity}}</span>
						</li>
						<li class="resetCss">
							<span class="info-tag-name">耳标号：</span>
							<span class="info-tag-text">{{detailData.orderBaseVo.buyCattleIdCards}}</span>
						</li>
						<li>
							<span class="info-tag-name">状态：</span>
							<span class="info-tag-text">{{detailData.state}}</span>
						</li>
						<li>
							<span class="info-tag-name">整牛单价(元/头)：</span>
							<span class="info-tag-text">{{detailData.totalPrice}}</span>
						</li>
						<li>
							<span class="info-tag-name">整牛重量(头)：</span>
							<span class="info-tag-text">{{detailData.productWeight}}</span>
						</li>
						<li>
							<span class="info-tag-name">单价(元/kg)：</span>
							<span class="info-tag-text">{{detailData.salesPrice}}</span>
						</li>
						<li>
							<span class="info-tag-name">养殖地区：</span>
							<span class="info-tag-text">{{detailData.originProvince}}</span>
						</li>
						<li>
							<span class="info-tag-name">养殖牧场：</span>
							<span class="info-tag-text">{{detailData.farmName}}</span>
						</li>
						<li>
							<span class="info-tag-name">采购金额(元)：</span>
							<span class="info-tag-text">{{detailData.orderMoney}}</span>
						</li>
						<li>
							<span class="info-tag-name">物流费用(元)：</span>
							<span class="info-tag-text">{{detailData.expressFee}}</span>
						</li>
						<li>
							<span class="info-tag-name">支付金额(元)：</span>
							<span class="info-tag-text">{{detailData.payMoney}}</span>
						</li>
						<li>
							<span class="info-tag-name">支付方式：</span>
							<span class="info-tag-text">
		                    	{{detailData.payMethod}}
		                    </span>
						</li>
						<li>
							<span class="info-tag-name">牛胴体重量(kg/头)：</span>
							<span class="info-tag-text">{{detailData.productCarcass}}</span>
						</li>
						<li>
							<span class="info-tag-name">交货牛胴体(kg)：</span>
							<span class="info-tag-text" v-if="detailData.productCarcass !== null && detailData.productCarcass !== '' || detailData.buyQuantity !== null && detailData.buyQuantity !== ''">
		                    	{{detailData.productCarcass * detailData.orderBaseVo.buyQuantity}}
		                    </span>
						</li>
						
						<li>
							<span class="info-tag-name">物流状态：</span>
							<span class="info-tag-text">{{detailData.state}}</span>
						</li>
						<li>
							<span class="info-tag-name">合同编号：</span>
							<span class="info-tag-text">{{detailData.contractCode}}</span>
						</li>
						<li class="last-oli">
							<span class="info-tag-name last-ospan">收件地址：</span>
							<span class="info-tag-text last-span2">
		                    	{{detailData.addressProvince}}
		                    	{{detailData.addressCity}}
		                    	{{detailData.addressArea}}
		                    	{{detailData.addressDetail}}
		                    </span>
						</li>
					</ul>

				</div>
				<div class="dialog-btn">
					<el-button type="primary" size="medium" @click="dialogFlag = false">关闭</el-button>
				</div>
			</div>
		</el-dialog>

		
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import BaseFormPage from '@/components/BaseFormPage';
	export default {
		components: {
			BaseFormPage
		},
		inject: ['reload'],
		data() {
			return {
				loadingFlag: false, //表格数据加载状态
				dialogFlag: false, //弹窗显示状态
				erbiaoFlag: false,  // 耳标弹窗
				erbiaos: '',
				phone: '',
				userName: '',
				payStartTime: '',
				payEndTime: '',
				payDate: '',
				payState: '',
				payTypeOptions: [],
				state: '',
				orderTypeOptions: [{
						value: '0',
						label: '待付款'
					},
					{
						value: '1',
						label: '养殖中'
					},
					{
						value: '2',
						label: '待发货'
					},
					{
						value: '3',
						label: '已完成'
				},{
						value: '9',
						label: '待收货'
				}],
				pageIndex: 1,
				pageSize: 20,
				tableHeight: 200, //表格初始高度
				tableData: [], //表格数据
				pagination: { //分页数据
					loadingFlag: false, //数据加载状态
					currentPage: 1, //当前页
					totalPage: 1, //总页数
					totalNum: 0, //总条数
					firstNum: 0, //分页显示起始值
					endNum: 0 //分页显示结束值
				},
				detailData: {
					orderBaseVo: {

					},
					userBaseVo: {

					}
				},
				detailId: '',
				jsonData: [],
				jsonFields: {
					"序号": "serialNumber",
					"订单编号": "orderRefNo",
					"支付时间": "payTime",
					"姓名": "userName",
					"单价(元/kg)": "salesPrice",
					"整牛重量(kg/头)": "productWeight",
					"整牛单价(元/头)": "totalPrice",
					"剩余交货期": "deliveryMonth",
					"采购数量(头)": "quantity",
					"耳标号": "cattleIdCard",
					"采购金额(元)": "orderMoney",
					"物流费用(元)": "expressFee",
					"支付金额(元)": "payMoney",
					"支付方式": "payMethod",
					"手机号": "phone",
					"收件地址": "address",
					"状态": "state",
					"合同编号": "contractCode",
				},
				jsonMeta: [
					[{
						"key": "charset",
						"value": "utf-8"
					}]
				],

				searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(213) == -1 ? false : true,
				exportBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(214) == -1 ? false : true,
				detailBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(215) == -1 ? false : true,
			}
		},
		created() {
			this.getPayMethod() // 支付类型
//			this.getOrderState() // 状态
			this.getListData()
		},
		methods: {
			erbiao(row){ // 耳标弹出框
				this.erbiaoFlag = true;
				this.erbiaos = row.cattleIdCard;
			},
			getOrderState() { //  状态
				this.$http.get('/order/getOrderState')
					.then(({ data }) => {
						console.log(data)
						this.orderTypeOptions = data;
					})
			},
			getPayMethod() { // 支付类型
				this.$http.get('/order/getPayMethod')
					.then(({
						data
					}) => {
						this.payTypeOptions = data;
					})
			},
			getDetailData() { // 详情
				this.$http.get('/order/detail/' + this.detailId)
					.then((res) => {
						console.log(res)
						if(res.data.payMethod == 'overpay') {
							res.data.payMethod = '余额支付'
						} else if(res.data.payMethod == 'wechat') {
							res.data.payMethod = '微信支付'
						}
						this.orderTypeOptions.map(item => {
							if(res.data.logisticsStatus == item.code) {
								res.data.logisticsStatus = item.message
							}
							return item
						})
						if(res.data.state == 0) {
							res.data.state = '待支付'
						} else if(res.data.state == 1) {
							res.data.state = '养殖中'
						} else if(res.data.state == 2) {
							res.data.state = '待发货'
						} else if(res.data.state == 3) {
							res.data.state = '已完成'
						}else if(res.data.state == 9) {
							res.data.state = '待收货'
						} 

						this.detailData = res.data;
					})
			},
			getListData() { // 列表
				this.loadingFlag = true;
				this.pagination.loadingFlag = true;
				let params = {
					phone: this.phone,
					userName: this.userName,
					payState: this.payState,
					state: this.state,
					payStartTime: this.payStartTime,
					payEndTime: this.payEndTime,
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				if(!this.phone) {
					delete params.phone
				}
				if(!this.userName) {
					delete params.userName
				}
				if(this.state === '') {
					delete params.state
				}
				if(!this.payStartTime) {
					delete params.payStartTime
				}
				if(!this.payEndTime) {
					delete params.payEndTime
				}
				if(!this.payState) {
					delete params.payState
				}
				this.$http.get('/order/order_list', params)
					.then((res) => {
						if(res.data.records.length > 0) {
							this.pagination.totalPage = res.data.pages;
							this.pagination.totalNum = res.data.total;
							res.data.records.forEach((item, index) => {
								//列表下标
								item.index = index;
								item.deliveryMonth = item.deliveryMonth + '个月';
								item.address = item.addressProvince + item.addressCity + item.addressArea + item.addressDetail;

								//列表序号
								item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
								//无数据处理
								item.orderRefNo = item.orderRefNo || '--'
							})
							this.pagination.firstNum = res.data.records[0].serialNumber
							this.pagination.endNum = res.data.records[res.data.records.length - 1].serialNumber
						} else {
							this.pagination.currentPage = 1
							this.pagination.totalPage = 1
							this.pagination.totalNum = 0
							this.pagination.firstNum = 0
							this.pagination.endNum = 0
						}
						this.tableData = res.data.records;
					})
					.then(() => {
						if(this.tableData.length !== 0){
							this.tableHeightFn();
						}
						this.loadingFlag = false;
						this.pagination.loadingFlag = false;
						this.getAllListData()
					})

			},
			tableHeightFn() { //表格高度
				let tableDataLength = this.tableData.length;
				let minHeight = tableDataLength == 0 ? 0 : 80; //根据需求距离底部的高度
				this.$nextTick(function() {
					//window.innerHeight:浏览器的可用高度
					//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
					this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
					if(this.tableData.length <= 0) {
						this.tableHeight = '60vh'
					}

					// 通过捕获系统的onresize事件触发去改变原有的高度
					let self = this;
					window.onresize = function() {
						self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
						self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
					}
				})
			},
			resetPageIndex() { //重置页码
				this.pagination.currentPage = 1;
				this.pageIndex = 1;
			},
			clearPhoneFn() { //清空手机号
				this.resetPageIndex()
				this.getListData()
			},
			clearUserName() { //清空姓名
				this.resetPageIndex()
				this.getListData()
			},
			changePayDate() {
				if(this.payDate) {
					this.payStartTime = this.payDate[0]
					this.payEndTime = this.payDate[1].replace('00:00:00', '23:59:59')
				} else {
					this.payStartTime = ''
					this.payEndTime = ''
				}
				this.resetPageIndex()
				this.getListData()
			},
			changePayType() {
				this.resetPageIndex()
				this.getListData()
			},
			changeOrderType() {
				this.resetPageIndex()
				this.getListData()
			},
			searchFn() {
				this.resetPageIndex()
				this.getListData()
			},
			cFirstPageFn(pageNum) { //首页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cLastPageFn(pageNum) { //尾页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cJumpPageFn(pageNum) { //页码跳转
				this.pageIndex = pageNum;
				this.getListData()
			},
			cPreFn(pageNum) { //上一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			cNextFn(pageNum) { //下一页
				this.pageIndex = pageNum;
				this.getListData()
			},
			resetParams() { //重置参数
				this.phone = ''
				this.userName = ''
				this.payDate = ''
				this.payStartTime = ''
				this.payEndTime = ''
				this.pageIndex = 1
				this.pageSize = 20
				this.payState = ''
				this.code = ''
				this.tableData = []
				this.detailData = {}
				this.pagination = {
					loadingFlag: false,
					currentPage: 1,
					totalPage: 1,
					totalNum: 0,
					firstNum: 0,
					endNum: 0
				}
			},
			cRefreshFn() { //刷新
				//				this.resetParams()
				//				this.getListData()
				this.reload()
			},
			checkCattleInfoFn(item) { // 详情点击
				this.detailId = item.id;
				this.getDetailData()
				this.dialogFlag = true;
			},
			getAllListData() {
				let params = {
					phone: this.phone,
					userName: this.userName,
					payState: this.payState,
					state: this.state,
					payStartTime: this.payStartTime,
					payEndTime: this.payEndTime,
					pgCt: 1,
					pgSz: 999999999
				}
				if(!this.phone) {
					delete params.phone
				}
				if(!this.userName) {
					delete params.userName
				}
				if(!this.payStartTime) {
					delete params.payStartTime
				}
				if(!this.payEndTime) {
					delete params.payEndTime
				}
				if(!this.payState) {
					delete params.payState
				}
				if(this.state === '') {
					delete params.state
				}
				this.$http.get('/order/order_list', params)
					.then((res) => {
						if(res.data.records.length > 0) {
							res.data.records.forEach((item, index) => {
								//列表下标
								item.index = index;
								item.deliveryMonth = item.deliveryMonth + '个月';
								item.address = item.addressProvince + item.addressCity + item.addressArea + item.addressDetail;
								if(item.payMethod == 'overpay') {
									item.payMethod = '余额支付'
								} else if(item.payMethod == 'wechat') {
									item.payMethod = '微信支付'
								}
								if(item.state == 0) {
									item.state = '待支付'
								} else if(item.state == 1) {
									item.state = '养殖中'
								} else if(item.state == 2) {
									item.state = '待发货'
								} else if(item.state == 3) {
									item.state = '已完成'
								} else if(item.state == 9) {
									item.state = '待收货'
								} else if(res.data.state == 99) {
									item.state = '订单取消'
								}
								//列表序号
								item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)

							})
						}
						this.jsonData = res.data.records
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/assets/css/dialogDetail.scss';
	.resetCss {
		align-items: inherit !important;
	}
	.last-oli{
		display: inherit; 
		padding-left: 74px;
		position: relative;
		.last-ospan{
			position: absolute;
			left: 0;
			top: 0;
		}
		.last-span2{
			position: absolute;
			left: 145px;
			top: 0;
		}
	}
	/* 耳标弹出框 */
	.erbiao-content{
		padding: 0 20px;
		.erbiao-subtitle{
			color: #344047;
			margin-bottom: 16px;
		}
		.erbiao-info{
			color: #5D6164;
			margin-bottom: 40px;
			padding: 0 30px;
		}
		.dialog-btn{
			text-align: center;
		}
	}
	
</style>